<template>
  <div id="baseInfoDiv">
    <form id="baseInfoForm" action="">
      <div class="baseinfo-inputregion">
        <label><span style="color: red">*</span>产品名称:</label>
        <input
          type="text"
          value=""
          id="productName"
          name="productName"
          v-model="productName"
        />
        <label><span style="color: red">*</span>产品英文名称:</label>
        <input
          type="text"
          value=""
          id="productEName"
          name="productEName"
          v-model="productEName"
        />
        <label style="display: none"
          ><span style="color: red">*</span>APP Id:
          <span
            class="myTip"
            @mouseenter="showAppIdTip = true"
            @mouseleave="showAppIdTip = false"
          >
            <img src="/magicflu/html/image/weform_tip.png" alt="" />
            <span class="myText" v-show="showAppIdTip"
              >请联系客服获取AppId(AppId必须真实有效，否则打包的系统将无法激活，且不同空间不能使用相同的AppId打包，否则打包的系统不能在同一台机器上安装使用)
              <img src="/magicflu/html/image/weform_square.png" alt="" />
            </span>
          </span>
        </label>
        <input
          style="display: none"
          type="text"
          value=""
          id="appId"
          name="appId"
          v-model="appId"
        />
        <label
          ><span style="color: red">*</span>版本号:
          <span
            class="myTip"
            @mouseenter="showVersionTip = true"
            @mouseleave="showVersionTip = false"
          >
            <img src="/magicflu/html/image/weform_tip.png" alt="" />
            <span class="myText" v-show="showVersionTip"
              >版本号请遵循x.x.x.xxxx规则(x代表数字并且可以是多位),例如：1.0.0.0001(首位不能为零),且升级包的版本号必须大于完整安装包的版本号
              <img src="/magicflu/html/image/weform_square.png" alt="" />
            </span>
          </span>
        </label>
        <input
          type="text"
          value=""
          id="version"
          name="version"
          v-model="version"
        />
        <label
          @mouseenter="showDescTips = true"
          @mouseleave="showDescTips = false"
          ><span style="color: red">*</span>安装包文件说明:
          <span class="myTip">
            <img src="/magicflu/html/image/weform_tip.png" alt="" />
            <span class="myText" v-show="showDescTips"
              >打包完后的exe文件鼠标移入时会显示此说明，同时会作为应用服务描述信息
            </span>
          </span>
        </label>
        <input
          value=""
          id="productDesc"
          name="productDesc"
          v-model="description"
        />
      </div>
    </form>
    <div class="baseinfo-imageregion">
      <div>
        <label
          >产品白色logo:
          <span
            class="myTip"
            @mouseenter="showlogo = true"
            @mouseleave="showlogo = false"
          >
            <img src="/magicflu/html/image/weform_tip.png" alt="" />
            <span class="myText" v-show="showlogo">
              <div>图标大小：300x98(像素)</div>
              <div>图标格式：png格式</div>
              <div>
                图标说明：此图标用于页面左上角，图标底色透明。在选择非默认皮肤的情况下，如果图标里面有文字，文字需要设置成白色字体
              </div>
              <img src="/magicflu/html/image/weform_square.png" alt="" />
            </span>
          </span>
        </label>
        <a
          href="/magicflu/html/help.jsp?type=buildPackage#question1"
          target="_blank"
          style="display: none"
          >&lt;白色logo规格及说明:&gt;</a
        >
        <section class="up-section fl" v-show="getLogo">
          <span class="up-span">修改图片</span>
          <input
            type="file"
            name="file"
            id="file"
            class="file"
            value=""
            accept="image/png"
            multiple=""
            @change="fileUpload($event, 'logo', 'logo.png', 'logo')"
          />
          <img class="up-img" :src="getLogo" />
          <input id="tags" name="tags" value="" type="hidden" />
        </section>
        <section class="z_file fl" v-show="!getLogo">
          <img src="../assets/images/uploadImage.png" id="" class="add-img" />
          <input
            type="file"
            name="file"
            id="file"
            class="file"
            value=""
            accept="image/png"
            multiple=""
            @change="fileUpload($event, 'logo', 'logo.png', 'logo')"
          />
        </section>
      </div>
      <div>
        <label
          >产品黑色logo:
          <span
            class="myTip"
            @mouseenter="showdefaultlogo = true"
            @mouseleave="showdefaultlogo = false"
          >
            <img src="/magicflu/html/image/weform_tip.png" alt="" />
            <span class="myText" v-show="showdefaultlogo">
              <div>图标大小：300x98(像素)</div>
              <div>图标格式：png格式</div>
              <div>
                图标说明：此图标用于页面左上角，图标底色透明。在选择默认皮肤的情况下，如果图标里面有文字，文字需要设置成黑色字体
              </div>
              <img src="/magicflu/html/image/weform_square.png" alt="" />
            </span>
          </span>
        </label>
        <a
          href="/magicflu/html/help.jsp?type=buildPackage#question2"
          target="_blank"
          style="display: none"
          >&lt;黑色logo规格及说明:&gt;</a
        >
        <section class="up-section fl" v-show="getDefaultLogo">
          <span class="up-span">修改图片</span>
          <input
            type="file"
            name="file"
            id="file"
            class="file"
            value=""
            accept="image/png"
            multiple=""
            @change="
              fileUpload($event, 'defaultLogo', 'logo.png', 'defaultLogo')
            "
          />
          <img class="up-img" :src="getDefaultLogo" />
          <input id="tags" name="tags" value="" type="hidden" />
        </section>
        <section class="z_file fl" v-show="!getDefaultLogo">
          <img src="../assets/images/uploadImage.png" id="" class="add-img" />
          <input
            type="file"
            name="file"
            id="file"
            class="file"
            value=""
            accept="image/png"
            multiple=""
            @change="
              fileUpload($event, 'defaultLogo', 'logo.png', 'defaultLogo')
            "
          />
        </section>
      </div>
      <div>
        <label
          >产品关于logo:
          <span
            class="myTip"
            @mouseenter="showaboutlogo = true"
            @mouseleave="showaboutlogo = false"
          >
            <img src="/magicflu/html/image/weform_tip.png" alt="" />
            <span class="myText" v-show="showaboutlogo">
              <div>图标大小：60x60(像素)</div>
              <div>图标格式：png格式</div>
              <div>图标说明：此图标用于产品关于页面，图标底色透明</div>
              <img src="/magicflu/html/image/weform_square.png" alt="" />
            </span>
          </span>
        </label>
        <a
          href="/magicflu/html/help.jsp?type=buildPackage#question3"
          target="_blank"
          style="display: none"
          >&lt;关于logo规格及说明:&gt;</a
        >
        <section class="up-section fl" v-show="getAboutLogo">
          <span class="up-span">修改图片</span>
          <input
            type="file"
            name="file"
            id="file"
            class="file"
            value=""
            accept="image/png"
            multiple=""
            @change="
              fileUpload($event, 'logo', 'newaboutlogo.png', 'aboutLogo')
            "
          />
          <img class="up-img" :src="getAboutLogo" />
          <input id="tags" name="tags" value="" type="hidden" />
        </section>
        <section class="z_file fl" v-show="!getAboutLogo">
          <img src="../assets/images/uploadImage.png" id="" class="add-img" />
          <input
            type="file"
            name="file"
            id="file"
            class="file"
            value=""
            accept="image/png"
            multiple=""
            @change="
              fileUpload($event, 'logo', 'newaboutlogo.png', 'aboutLogo')
            "
          />
        </section>
      </div>
      <div>
        <label
          >产品安装包图标:
          <span
            class="myTip"
            @mouseenter="showdesktoplogo = true"
            @mouseleave="showdesktoplogo = false"
          >
            <img src="/magicflu/html/image/weform_tip.png" alt="" />
            <span class="myText" v-show="showdesktoplogo">
              <div>图标大小：128x128(像素)</div>
              <div>图标格式：ico格式</div>
              <div>
                图标说明：此图标用于产品打包之后生成的安装包/升级包图标，以及打包的产品安装后在桌面上显示的快捷图标，图标底色透明
              </div>
              <img src="/magicflu/html/image/weform_square.png" alt="" />
            </span>
          </span>
        </label>
        <a
          href="/magicflu/html/help.jsp?type=buildPackage#question4"
          target="_blank"
          style="display: none"
          >&lt;安装包图标规格及说明:&gt;</a
        >
        <section class="up-section fl" v-show="getDeskTopIcon">
          <span class="up-span">修改图片</span>
          <input
            type="file"
            name="file"
            id="file"
            class="file"
            value=""
            accept=".ico"
            multiple=""
            @change="
              fileUpload($event, 'product', 'desktop.ico', 'deskTopIcon')
            "
          />
          <img class="up-img" :src="getDeskTopIcon" />
          <input id="tags" name="tags" value="" type="hidden" />
        </section>
        <section class="z_file fl" v-show="!getDeskTopIcon">
          <img src="../assets/images/uploadImage.png" id="" class="add-img" />
          <input
            type="file"
            name="file"
            id="file"
            class="file"
            value=""
            accept=".ico"
            multiple=""
            @change="
              fileUpload($event, 'product', 'desktop.ico', 'deskTopIcon')
            "
          />
        </section>
      </div>
      <!--<div >
                    <label>服务管理器启动时图标:
                        <span class="myTip" @mouseenter="showservicelogo=true" @mouseleave="showservicelogo=false">
                            <img src="/magicflu/html/image/weform_tip.png" alt="">
                            <span class="myText" v-show="showservicelogo">
                                <div>图标大小：128x128(像素)</div>
                                <div>图标格式：ico格式</div>
                                <div>图标说明：此图标用于产品服务正常安装并启动后在右下角任务栏上显示的图标，图标底色透明</div>
                                <img src="/magicflu/html/image/weform_square.png" alt="">
                            </span>
                        </span>
                    </label>
                    <a href="/magicflu/html/help.jsp?type=buildPackage#question5" target="_blank" style="display:none">&lt;服务管理器启动时图标规格及说明:&gt;</a>
                    <section class="up-section fl" v-show="getServiceIcon">
                        <span class="up-span">修改图片</span>
                        <input type="file" name="file" id="file" class="file" value="" accept=".ico" multiple="" @change="fileUpload($event,'product','service.ico','serviceIcon')">
                        <img class="up-img" :src="getServiceIcon">
                        <input id="tags" name="tags" value="" type="hidden">
                </section>
                    <section class="z_file fl" v-show="!getServiceIcon">
                        <img src="../assets/images/uploadImage.png" id="" class="add-img"/>
                        <input type="file" name="file" id="file" class="file" value="" accept=".ico" multiple="" @change="fileUpload($event,'product','service.ico','serviceIcon')">
                    </section>
                </div>
                <div >
                    <label>服务管理器停止时图标:
                        <span class="myTip" @mouseenter="showservicestoplogo=true" @mouseleave="showservicestoplogo=false">
                            <img src="/magicflu/html/image/weform_tip.png" alt="">
                            <span class="myText" v-show="showservicestoplogo">
                                <div>图标大小：128x128(像素)</div>
                                <div>图标格式：ico格式</div>
                                <div>图标说明：此图标用于产品服务正常安装并停止服务后在右下角任务栏上显示的图标，一般呈现灰色，图标底色透明</div>
                                <img src="/magicflu/html/image/weform_square.png" alt="">
                            </span>
                        </span>
                    </label>
                    <a href="/magicflu/html/help.jsp?type=buildPackage#question6" target="_blank" style="display:none">&lt;服务管理器停止时图标规格及说明:&gt;</a>
                    <section class="up-section fl" v-show="getServiceStopIcon">
                        <span class="up-span">修改图片</span>
                        <input type="file" name="file" id="file" class="file" value="" accept=".ico" multiple="" @change="fileUpload($event,'product','serviceStop.ico','serviceStopIcon')">
                        <img class="up-img" :src="getServiceStopIcon">
                        <input id="tags" name="tags" value="" type="hidden">
                </section>
                    <section class="z_file fl" v-show="!getServiceStopIcon">
                        <img src="../assets/images/uploadImage.png" id="" class="add-img"/>
                        <input type="file" name="file" id="file" class="file" value="" accept=".ico" multiple="" @change="fileUpload($event,'product','serviceStop.ico','serviceStopIcon')">
                    </section>
                </div>-->
      <div>
        <label
          >登录页背景图:
          <span
            class="myTip"
            @mouseenter="showloginbg = true"
            @mouseleave="showloginbg = false"
          >
            <img src="/magicflu/html/image/weform_tip.png" alt="" />
            <span class="myText" v-show="showloginbg">
              <div>图片大小：1920x1280(像素)</div>
              <div>图片格式：jpg格式</div>
              <div>图片说明：此图片用于应用登录页背景图</div>
              <img src="/magicflu/html/image/weform_square.png" alt="" />
            </span>
          </span>
        </label>
        <a
          href="/magicflu/html/help.jsp?type=buildPackage#question6"
          target="_blank"
          style="display: none"
        ></a>
        <section class="up-section fl" v-show="getLoginBg">
          <span class="up-span">修改图片</span>
          <input
            type="file"
            name="file"
            id="file"
            class="file"
            value=""
            accept=".jpg"
            multiple=""
            @change="fileUpload($event, 'product', 'newloginbg.jpg', 'loginBg')"
          />
          <img class="up-img" :src="getLoginBg" />
          <input id="tags" name="tags" value="" type="hidden" />
        </section>
        <section class="z_file fl" v-show="!getLoginBg">
          <img src="../assets/images/uploadImage.png" id="" class="add-img" />
          <input
            type="file"
            name="file"
            id="file"
            class="file"
            value=""
            accept=".jpg"
            multiple=""
            @change="fileUpload($event, 'product', 'newloginbg.jpg', 'loginBg')"
          />
        </section>
      </div>
    </div>
    <div class="baseInfoSaveDiv">
      <span class="baseInfoSaveBtn" @click="formSubmit()">保存</span>
    </div>
    <ModalItem ref="modal"></ModalItem>
  </div>
</template>

<script type="text/javascript">
import packagingUtil from "../packagingUtil.js";
import ModalItem from "../components/ModalItem";
export default {
  name: "BaseInfo",
  components: { ModalItem },
  data() {
    return {
      imgs: [],
      showAppIdTip: false,
      showVersionTip: false,
      showlogo: false,
      showdefaultlogo: false,
      showaboutlogo: false,
      showdesktoplogo: false,
      showservicelogo: false,
      showservicestoplogo: false,
      showloginbg: false,
      showDescTips: false,
    };
  },
  mounted() {
    var self = this;
    $.validator.setDefaults({
      submitHandler: function () {
        self.saveBaseInfo();
        return false;
      },
    });
    $("#baseInfoForm").validate({
      rules: {
        productName: {
          required: true,
        },
        productEName: {
          required: true,
          maxlength: 20,
          verifyEName: true,
        },
        appId: {
          required: true,
          verifyAppId: true,
        },
        version: {
          required: true,
          verifyVersion: true,
        },
        productDesc: {
          required: true,
        },
      },
      messages: {
        productName: {
          required: "产品名称不能为空",
        },
        productEName: {
          required: "产品英文名称不能为空",
          maxlength: "产品英文名称不能超过20个字符",
          validaEName: "产品英文名称只能包含字母和空格和下划线_",
        },
        appId: {
          required: "AppId不能为空",
          verifyAppId: "appId格式不正确，联系客服获取",
        },
        version: {
          required: "版本号不能为空",
          validateVersion:
            "版本号必须遵从x.x.x.xxxx(x代表数字并且可以是多位,首位必须大于0)的规则",
        },
        productDesc: {
          required: "安装包文件说明不能为空",
        },
      },
    });
  },
  methods: {
    formSubmit() {
      $("#baseInfoForm").submit();
    },
    saveBaseInfo() {
      wait();
      packagingUtil
        .saveProductInfo(
          this.$store.state.productInfo,
          this.$store.state.spaceId,
          this
        )
        .then((res) => {
          this.$store.commit("getProductInfo", this);
          this.$store.commit("updateModifyStatus", false);
          jdiclose();
          packagingUtil.myAlert("保存成功", "提示", this);
        });
    },
    fileUpload(event, action, filename, modelName) {
      let productId = this.$store.state.productInfo.id;
      let spaceId = this.$store.state.spaceId;
      var self = this;
      let file = event.target.files[0];
      var newNameExtension = file.name.substring(
        file.name.lastIndexOf(".") + 1,
        file.name.length
      );
      if (filename.endsWith(".png")) {
        if (newNameExtension.toLowerCase() != "png") {
          packagingUtil.myAlert(
            "请上传png格式图片，且不能将其他格式图片重命名成png格式,否则图片将无法使用",
            "提示",
            this
          );
          return false;
        }
      } else if (filename.endsWith(".ico")) {
        if (newNameExtension.toLowerCase() != "ico") {
          packagingUtil.myAlert(
            "请上传ico格式图片，且不能将其他格式图片重命名成ico格式,否则图片将无法使用",
            "提示",
            this
          );
          return false;
        }
      } else if (filename.endsWith(".jpg")) {
        if (newNameExtension.toLowerCase() != "jpg") {
          packagingUtil.myAlert(
            "请上传jpg格式图片，且不能将其他格式图片重命名成jpg格式,否则图片将无法使用",
            "提示",
            this
          );
          return false;
        }
      }
      let param = new FormData(); // 创建form对象
      param.append("file", file, file.name); // 通过append向form对象添加数据
      param.append("chunk", "0"); // 添加form表单中其他数据
      console.log(param.get("file")); // FormData私有类对象，访问不到，可以通过get判断值是否传进去
      let config = {
        headers: { "Content-Type": "multipart/form-data" },
      };
      this.$axios
        .put(
          "/magicflu/service/s/" +
            spaceId +
            "/packageres/" +
            productId +
            "/" +
            action +
            "/" +
            filename,
          param,
          config
        )
        .then(function (response) {
          var tempObj = {};
          tempObj[modelName] = response.data + "?t=" + new Date().getTime();
          self.$store.commit("updateBaseInfoResource", tempObj);
        })
        .catch(function (response) {
          console.log(response);
        });
    },
  },
  computed: {
    productName: {
      get() {
        return this.$store.state.productInfo.productName;
      },
      set(value) {
        this.$store.commit("updateProductInfo", { productName: value });
      },
    },
    productEName: {
      get() {
        return this.$store.state.productInfo.productEName;
      },
      set(value) {
        this.$store.commit("updateProductInfo", { productEName: value });
      },
    },
    version: {
      get() {
        return this.$store.state.productInfo.version;
      },
      set(value) {
        this.$store.commit("updateProductInfo", { version: value });
      },
    },
    author: {
      get() {
        return this.$store.state.productInfo.author;
      },
      set(value) {
        this.$store.commit("updateProductInfo", { author: value });
      },
    },
    description: {
      get() {
        return this.$store.state.productInfo.description;
      },
      set(value) {
        this.$store.commit("updateProductInfo", { description: value });
      },
    },
    contactWay: {
      get() {
        return this.$store.state.productInfo.contactWay;
      },
      set(value) {
        this.$store.commit("updateProductInfo", { contactWay: value });
      },
    },
    appId: {
      get() {
        return this.$store.state.productInfo.appId;
      },
      set(value) {
        this.$store.commit("updateProductInfo", { appId: value });
      },
    },
    getLogo() {
      if (
        this.$store.state.productInfo.logo &&
        this.$store.state.productInfo.logo.indexOf("?t=") == -1
      )
        return (
          this.$store.state.productInfo.logo + "?t=" + new Date().getTime()
        );
      else return this.$store.state.productInfo.logo;
    },
    getDefaultLogo() {
      if (
        this.$store.state.productInfo.defaultLogo &&
        this.$store.state.productInfo.defaultLogo.indexOf("?t=") == -1
      ) {
        return (
          this.$store.state.productInfo.defaultLogo +
          "?t=" +
          new Date().getTime()
        );
      } else return this.$store.state.productInfo.defaultLogo;
    },
    getAboutLogo() {
      if (
        this.$store.state.productInfo.aboutLogo &&
        this.$store.state.productInfo.aboutLogo.indexOf("?t=") == -1
      ) {
        return (
          this.$store.state.productInfo.aboutLogo + "?t=" + new Date().getTime()
        );
      } else return this.$store.state.productInfo.aboutLogo;
    },
    getDeskTopIcon() {
      if (
        this.$store.state.productInfo.deskTopIcon &&
        this.$store.state.productInfo.deskTopIcon.indexOf("?t=") == -1
      ) {
        return (
          this.$store.state.productInfo.deskTopIcon +
          "?t=" +
          new Date().getTime()
        );
      } else return this.$store.state.productInfo.deskTopIcon;
    },
    getServiceIcon() {
      if (
        this.$store.state.productInfo.serviceIcon &&
        this.$store.state.productInfo.serviceIcon.indexOf("?t=") == -1
      ) {
        return (
          this.$store.state.productInfo.serviceIcon +
          "?t=" +
          new Date().getTime()
        );
      } else return this.$store.state.productInfo.serviceIcon;
    },
    getServiceStopIcon() {
      if (
        this.$store.state.productInfo.serviceStopIcon &&
        this.$store.state.productInfo.serviceStopIcon.indexOf("?t=") == -1
      ) {
        return (
          this.$store.state.productInfo.serviceStopIcon +
          "?t=" +
          new Date().getTime()
        );
      } else return this.$store.state.productInfo.serviceStopIcon;
    },
    getLoginBg() {
      if (
        this.$store.state.productInfo.loginBg &&
        this.$store.state.productInfo.loginBg.indexOf("?t=") == -1
      ) {
        return (
          this.$store.state.productInfo.loginBg + "?t=" + new Date().getTime()
        );
      } else return this.$store.state.productInfo.loginBg;
    },
  },

  watch: {
    // 限制50个字符
    productName(val) {
      const limit = 50;
      if (val && val.length > limit) {
        this.$store.commit("updateProductInfo", {
          productName: val.substring(0, limit),
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
$inputregion: 280px;
$inputregion-margin-left: 120px;
$imageregion-margin-left: 120px;

#baseInfoDiv {
  padding-top: 20px;
}

.baseinfo-inputregion {
  width: $inputregion;
  float: left;
  margin-left: $inputregion-margin-left;
}

.baseinfo-inputregion label {
  display: inline-block;
  width: 100%;
  height: 17px;
  margin-bottom: 9px;
}

.baseinfo-inputregion input {
  width: 100%;
  height: 30px;
  background-color: #ffffff;
  border-radius: 4px;
  border: solid 1px #666666;
  margin-bottom: 20px;
}

.baseinfo-inputregion textarea {
  width: 100%;
  height: 40px;
  border-radius: 4px;
  border: solid 1px #666666;
  margin-bottom: 20px;
}

.baseinfo-imageregion {
  width: calc(
    100% - #{$inputregion} - #{$inputregion-margin-left} - #{$imageregion-margin-left}
  );
  float: left;
  margin-left: $imageregion-margin-left;
}

.baseinfo-imageregion div {
  width: 220px;
  float: left;
  margin-bottom: 15px;
}

.baseinfo-imageregion label {
  width: 100%;
  height: 17px;
  display: inline-block;
  margin-bottom: 8px;
}

.baseinfo-imageregion a {
  width: 100%;
  display: inline-block;
  margin-bottom: 19px;
  height: 13px;
  font-family: MicrosoftYaHei;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 0px;
  letter-spacing: 0px;
  color: #57a8ff;
}

.baseInfoSaveDiv {
  clear: both;
  text-align: center;
}

.baseInfoSaveBtn {
  width: 120px;
  height: 36px;
  background-color: #f8f8f8;
  border-radius: 4px;
  border: solid 1px #333333;
  display: inline-block;
  line-height: 36px;
  margin-top: 50px;
  cursor: pointer;
}

.z_file {
  position: relative;
}

.file {
  width: 100%;
  height: 100%;
  opacity: 0;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 100;
  cursor: pointer;
}

.up-section {
  position: relative;
  margin-right: 20px;
  margin-bottom: 20px;
  border-radius: 7px;
  border: solid 2px #e0e0e0;
  background: #f3f3f3;
}

.up-section .up-span {
  display: block;
  width: 100%;
  height: 100%;
  visibility: hidden;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 9;
  background: rgba(0, 0, 0, 0.5);
  line-height: 120px;
  text-align: center;
  color: #fff;
}

.up-section:hover {
  /*border: 2px solid #f15134;*/
}

.up-section:hover .up-span {
  visibility: visible;
}

.up-img {
  display: block;
  display: block;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  margin: auto;
  right: 0;
  bottom: 0;
}

.up-opcity {
  opacity: 0;
}

.img-name-p {
  display: none;
}

.up-section {
  width: 120px;
  height: 120px;
}

.z_file {
  width: 120px;
  height: 120px;
}

.z_file .add-img {
  display: block;
  width: 120px;
  height: 120px;
}

.myTip {
  position: relative;
  vertical-align: middle;
  cursor: pointer;
}

.myTip span.myText {
  position: absolute;
  top: -10px;
  left: 30px;
  width: 230px;
  font-size: 12px;
  color: rgb(255, 111, 111);
  line-height: 16px;
  text-align: left;
  z-index: 10000;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(168, 168, 168);
  border-image: initial;
  background: rgb(255, 255, 225);
  padding: 5px 6px;
  border-radius: 4px;
}

.myTip span.myText > img {
  position: absolute;
  top: 8px;
  left: -9px;
}

@media screen and (max-width: 1021px) {
  $inputregion: 200px;
  $inputregion-margin-left: 60px;
  $imageregion-margin-left: 60px;

  .baseinfo-inputregion {
    width: $inputregion;
    margin-left: $inputregion-margin-left;
  }

  .baseinfo-imageregion {
    width: calc(
      100% - #{$inputregion} - #{$inputregion-margin-left} - #{$imageregion-margin-left}
    );
    margin-left: $imageregion-margin-left;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1365px) {
  $inputregion: 220px;
  $inputregion-margin-left: 60px;
  $imageregion-margin-left: 80px;

  .baseinfo-inputregion {
    width: $inputregion;
    margin-left: $inputregion-margin-left;
  }

  .baseinfo-imageregion {
    width: calc(
      100% - #{$inputregion} - #{$inputregion-margin-left} - #{$imageregion-margin-left}
    );
    margin-left: $imageregion-margin-left;
  }

  .baseinfo-inputregion input {
    margin-bottom: 10px;
  }

  .baseInfoSaveBtn {
    margin-top: 40px;
  }
}

@media screen and (min-width: 1366px) and (max-width: 1439px) {
  $inputregion: 220px;
  $inputregion-margin-left: 60px;
  $imageregion-margin-left: 80px;

  #baseInfoDiv {
    padding-top: 30px;
  }

  .baseinfo-inputregion {
    width: $inputregion;
    margin-left: $inputregion-margin-left;
  }

  .baseinfo-imageregion {
    width: calc(
      100% - #{$inputregion} - #{$inputregion-margin-left} - #{$imageregion-margin-left}
    );
    margin-left: $imageregion-margin-left;
  }

  .baseinfo-inputregion input {
    margin-bottom: 10px;
  }

  .baseInfoSaveBtn {
    margin-top: 10px;
  }
}

@media screen and (min-width: 1440px) and (max-width: 1599px) {
  $inputregion: 240px;
  $inputregion-margin-left: 100px;
  $imageregion-margin-left: 80px;

  .baseinfo-inputregion {
    width: $inputregion;
    margin-left: $inputregion-margin-left;
  }

  .baseinfo-imageregion {
    width: calc(
      100% - #{$inputregion} - #{$inputregion-margin-left} - #{$imageregion-margin-left}
    );
    margin-left: $imageregion-margin-left;
  }

  .baseInfoSaveBtn {
    margin-top: 10px;
  }
}

@media screen and (min-width: 1600px) and (max-width: 1919px) {
  $inputregion: 240px;
  $inputregion-margin-left: 100px;
  $imageregion-margin-left: 80px;

  .baseinfo-inputregion {
    width: $inputregion;
    margin-left: $inputregion-margin-left;
  }

  .baseinfo-imageregion {
    width: calc(
      100% - #{$inputregion} - #{$inputregion-margin-left} - #{$imageregion-margin-left}
    );
    margin-left: $imageregion-margin-left;
  }

  .baseInfoSaveBtn {
    margin-top: 10px;
  }
}
</style>

<style>
form.cmxform label.error,
label.error {
  position: relative !important;
}
</style>
